<script>
export default {
  name: 'TodoList'
}
</script>

<template>
  <div class="todo-list">
    <h1 class="title">代办事项</h1>
    <div class="input-container">
      <input
        v-model="newTask"
        placeholder="输入新任务"
        @keyup.enter="addTask"
        class="task-input"
      />
      <button @click="addTask" class="add-button">添加</button>
    </div>

    <div class="task-list-container">
      <ul class="task-list">
        <li v-for="(task, index) in tasks" :key="index" class="task-item">
          <input
            type="checkbox"
            v-model="task.completed"
            @change="toggleTask(task)"
            class="task-checkbox"
          />
          <span :class="{ 'completed': task.completed }">{{ task.content }}</span>
          <button @click="deleteTask(index)" class="delete-button">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义新任务输入框绑定的值
const newTask = ref('');
// 定义任务列表
const tasks = ref([]);

// 从 localStorage 加载任务
onMounted(() => {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    tasks.value = JSON.parse(savedTasks);
  }
});

// 保存任务到 localStorage
const saveTasks = () => {
  localStorage.setItem('tasks', JSON.stringify(tasks.value));
};

// 添加任务
const addTask = () => {
  if (newTask.value.trim()) {
    tasks.value.push({ content: newTask.value, completed: false });
    newTask.value = '';
    saveTasks();
  }
};

// 删除任务
const deleteTask = (index) => {
  tasks.value.splice(index, 1);
  saveTasks();
};

// 切换任务完成状态
const toggleTask = () => {
  saveTasks();
};
</script>

<style scoped>
.todo-list {
  width: 600px;
  height: 350px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

.task-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  outline: none;
}

.add-button {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.add-button:hover {
  background-color: #555;
}

.task-list-container {
  /* 设置最大高度，超过该高度会出现滚动条 */
  max-height: 150px;
  /* 当内容超过容器大小时，显示滚动条 */
  overflow-y: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.task-list-container::-webkit-scrollbar {
  display: none;
}

.task-list {
  list-style-type: none;
  padding: 0;
}

.task-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-checkbox {
  margin-right: 10px;
}

.completed {
  text-decoration: line-through;
  color: #999;
}

.delete-button {
  margin-left: auto;
  padding: 5px 10px;
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #d32f2f;
}
</style>
